<template>
  <div>
    <div class="fliex">
      <van-nav-bar
          title="豆瓣前10排行榜"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <h1>豆瓣前10排行榜</h1>
    <div class="content" v-for="(item,index) in box" :key="index">
      <h2>第{{index+1}}名</h2>
      <a :href="item.info.url" class="film">
        <img :src="imgList[index]" alt="">
        <p>{{ titleList[index] }}</p>
        <div class="fraction">评分：{{ item.info.pingfen }}</div>
        <div>评价：{{ item.info.pingjia }}</div>
      </a>
    </div>
    <ToTop></ToTop>
  </div>
</template>

<script>
import {film} from "@/api/api";
import img1 from "@/assets/movie/01.jpg"
import img2 from "@/assets/movie/02.jpg"
import img3 from "@/assets/movie/03.jpg"
import img4 from "@/assets/movie/04.jpg"
import img5 from "@/assets/movie/05.jpg"
import img6 from "@/assets/movie/06.jpg"
import img7 from "@/assets/movie/07.jpg"
import img8 from "@/assets/movie/08.jpg"
import img9 from "@/assets/movie/09.jpg"
import img10 from "@/assets/movie/11.jpg"
import ToTop from "@/components/ToTop";
export default {
  name: "Watercress",
  components:{
    ToTop,
  },
  data() {
    return {
      box: '',
      imgList:[
        img1,
        img2,
        img3,
        img9,
        img4,
        img7,
        img8,
        img5,
        img6,
        img10,
      ],
      titleList:[
          '子弹列车',
          '一场很（没）有必要的春晚',
          '狩猎',
          '新·奥特曼',
          '金发梦露',
          '暗夜狼人',
          '有史以来最棒的啤酒运送',
          '咒术回战 0 ',
          '沼泽深处的女孩',
          '养鬼吃人',
      ]
    }
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1)
    }
  },
  created() {
    film().then(res => {
      console.log(res.data.data)
      this.box = res.data.data
    })
  }
}
</script>

<style scoped lang="less">
.content{
  text-align: center;
}
h2{
  margin-top: 20px;
  color: black;
}
h1 {
  text-align: center;
  color: @blue;
  margin-top: 50px;
  padding-top: 20px;
}

.film {
  padding: 20px 50px;
  position: relative;
  display: block;
  img {
    pointer-events: none;
    width: 100%;
    height: 300px;
  }

  .fraction {
    position: absolute;
    top: 35px;
    right: 65px;
    color: white;
    background-color: #0000007a;
    padding: 3px 14px;
    border-radius: 9px;
  }
}
.fliex{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 50px;
  //background-color: @blue;
  z-index: 37;
}

</style>